<template>
  <div class="tableAll">
    <table class="tableClass" border="1" cellspacing="0">
      <thead>
        <tr class="lineTr">
          <th>日期</th>
          <th
            v-for="(item, index) in tiemMay"
            :key="item.May"
            @click="indexS(index, $event)"
          >
            {{ index + 1 + "月" }}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in timeDay" :key="item.Day" ref="tr">
          <td>
            {{ item }}
          </td>
          <td v-for="item in tableBorder" :key="item.border"></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: "biaoge",
  data() {
    return {
      //月份
      tiemMay: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
      //日
      timeDay: [
        "1日",
        "2日",
        "3日",
        "4日",
        "5日",
        "6日",
        "7日",
        "8日",
        "9日",
        "10日",
        "11日",
        "12日",
        "13日",
        "14日",
        "15日",
        "16日",
        "17日",
        "18日",
        "19日",
        "20日",
        "21日",
        "22日",
        "23日",
        "24日",
        "25日",
        "26日",
        "27日",
        "28日",
        "29日",
        "30日",
        "31日",
      ],
      //空表格
      tableBorder: ["", "", "", "", "", "", "", "", "", "", "", ""],
    };
  },
  methods: {
    indexS(index, e) {
      let tiemMay = this.tiemMay;
      let tableBorder = this.tableBorder;
      console.log(e);
      for (let i = 1; i < tableBorder.length; i++) {
        if (index + 1 == tiemMay[i]) {
          // console.log((this.$refs.style[i].style.background = "#f56c6c"));
          //获取所有tr
          console.log(this.$refs.tr);
        }
      }
    },
  },
};
</script>

<style scoped lang="less">
* {
  padding: 0px;
  margin: 0px;
}
tbody tr td:nth-of-type(2) {
  background-color: red;
}
.tableClass {
  width: 100%;
  border-color: #f4f4f4;
  tbody tr:hover {
    background-color: #f5f5f5;
  }

  tr {
    td {
      height: 50px;
    }
  }

  .lineTr {
    th {
      width: 7.7%;
      background-color: #f7f7f7;
      box-sizing: border-box;
      height: 50px;
      line-height: 50px;
      td {
        border: 1px solid #f4f4f4;
      }
    }
  }
}
</style>